<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>开启新的窗口</title>
</head>

<style>
    body {
        padding: 0;
        margin: 0;
        background-color: #FCF6E5;
        text-align: center;
    }
    button {
        height: 80px;
        font-size: 36px;
        border-radius: 6px;
        background-color: #ffffff;
        margin-top: 20px;
    }

    #bilibili{
        color: #E5697A;
    }
    #youtube{
        color: #A84631;
    }
</style>

<body>
    <button id="bilibili">打开B站</button>
    <button id="youtube">打开youtube</button>
    <button id="local-list">打开本地文件local-list.html</button>
</body>


<script>
    const path = require("path");
    const electron = require("electron");

    let BrowserWindow = electron.remote.BrowserWindow;


    let bilibiliWindow = null;
    let youtubeWindow = null;
    let localListWindow = null;

    document.getElementById("bilibili").onclick = function(){

        bilibiliWindow = new BrowserWindow ({width: 1000, height:800})

        bilibiliWindow.loadURL("https://bilibili.com/");

        bilibiliWindow.on("close", function(){
            bilibiliWindow = null;

        })
    }

    document.getElementById("youtube").onclick = function(){

        youtubeWindow = new BrowserWindow ({width: 1000, height:800})

        youtubeWindow.loadURL("https://youtube.com/");

        youtubeWindow.on("close", function(){
            youtubeWindow = null;
        })
    }

    document.getElementById("local-list").onclick = function(){

        localListWindow = new BrowserWindow ({width: 1000, height:800})

        localListWindow.loadURL(`file://${__dirname}/local-list.html`);

        localListWindow.on("close", function(){
            localListWindow = null;
        })
    }
</script>

</html>